<template>
  <div>
    <div><h1 class="userTitle">文章列表</h1></div><br>
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :span="24" style="height:60px">
        <a-row type="flex">
          <a-col :span="7" style="height:60px">
            <span class="titleOfArticle">文章标题：</span><a-input type="text" class="titleInput" v-model="articleTitle"></a-input>
          </a-col>
          <a-col :span="17" style="height:60px">
            <a-col :span="2" style="height:60px"><a-button type="primary" @click="findArticle">查询</a-button></a-col>
            <a-col :span="22" style="height:60px"><a-button type="primary" @click="resetArticle">重置</a-button></a-col>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <div>
      <a-button type="primary" class="editable-add-btn" @click="deleteArticleSelected">一键删除</a-button>
      <a-table
        :rowSelection="{selectedRowKeys: articleIdList, onChange: onSelectChange}"
        :columns="columns"
        :dataSource="sortedArticles"
        :rowKey="record => record.articleId"
        bordered
      >
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
            <a-button type="primary" @click="editById(record.articleId)">编辑</a-button>
            <a-popconfirm
              v-if="sortedArticles.length"
              title="确认删除?"
              @confirm="() => deleteById(record.articleId)">
              <a href="javascript:;"><a-button type="primary">删除</a-button></a>
            </a-popconfirm>
            <a-button class="btn" type="primary" @click="getContent(record.articleId)">查看</a-button>
            <a-modal
              title="文章内容"
              style="text-align:center"
              width="850px"
              v-model="visible"
              @ok="handleOk"
            >
              <div v-html="reportContent"></div>
            </a-modal>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { getArticleContent, deleteByArticleId, findByArticleTitle, deleteArticleList, findAllArticle } from '@/api/file'
const columns = [{
  title: '标题',
  dataIndex: 'articleTitle',
  width: '20%',
  scopedSlots: { customRender: 'articleTitle' }
}, {
  title: '标签',
  dataIndex: 'articleTag',
  width: '10%',
  scopedSlots: { customRender: 'articleTag' }
}, {
  title: '类型',
  dataIndex: 'articleType',
  width: '10%',
  scopedSlots: { customRender: 'articleType' }
}, {
  title: '封面',
  dataIndex: 'imgUrl',
  width: '5%',
  scopedSlots: { customRender: 'imgUrl' }
}, {
  title: '创建时间',
  dataIndex: 'createTime',
  width: '17%',
  scopedSlots: { customRender: 'createTime' }
}, {
  title: '更新时间',
  dataIndex: 'updateTime',
  width: '17%',
  scopedSlots: { customRender: 'updateTime' }
}, {
  title: '操作',
  dataIndex: 'operation',
  scopedSlots: { customRender: 'operation' }
}]

export default {
  name: 'ArticleList',
  data () {
    return {
      dataSource: [],
      articleIdList: [],
      columns,
      articleId: '',
      articleTitle: '',
      articleTag: '',
      articleType: '',
      reportContent: '',
      visible: false
    }
  },
  /* eslint-disable */
  computed: {
    sortedArticles: function () {
      return this.dataSource.sort(function (a, b) {
        let aTimeString = a.createTime
        let bTimeString = b.createTime
        aTimeString = aTimeString.replace(/-/g, '/')
        bTimeString = bTimeString.replace(/-/g, '/')
        let aTime = new Date(aTimeString).getTime()
        let bTime = new Date(bTimeString).getTime()
        return bTime - aTime
      })
    }
  },
  created () {
    this.axios.get('/api/findAllArticle').then((res) => {
      if (res.status) {
        var dataimg = JSON.parse(res.data)
        for (let i = 0; i < dataimg.length; i++) {
          if (dataimg[i].imgUrl !== undefined) {
            this.$set(dataimg[i], 'imgUrl', '有')
          } else {
            this.$set(dataimg[i], 'imgUrl', '无')
          }
        }
        this.dataSource = dataimg
      }
    })
  },
  methods: {
    handleOk () {
      this.visible = false
    },
    onSelectChange (selectedRowKeys) {
      this.articleIdList = selectedRowKeys
    },
    getContent (val) {
      var param = {
        'articleId': val
      }
      getArticleContent(param).then((res) => {
        this.visible = true
        this.reportContent = res.data
      })
    },
    findArticle () {
      var param = {
        'articleTitle': this.articleTitle
      }
      if (param.articleTitle === '') {
        this.$message.info('请输入文章标题！')
      } else {
        findByArticleTitle(param).then((res) => {
          if (res.status) {
            this.dataSource = JSON.parse(res.data)
            this.commonjudge(this.dataSource)
          } else {
            this.$message.info(res.data)
          }
        })
      }
    },
    resetArticle () {
      findAllArticle().then((res) => {
        this.dataSource = JSON.parse(res.data)
        this.commonjudge(this.dataSource)
      })
    },
    deleteById (val) {
      var param = {
        'articleId': val
      }
      deleteByArticleId(param).then((res) => {
        this.dataSource = JSON.parse(res.data)
        this.commonjudge(this.dataSource)
      })
    },
    deleteArticleSelected () {
      var param = {
        'articleIdList': this.articleIdList
      }
      var arr = param.articleIdList
      if (arr.length === 0) {
        this.$message.info('请添加选项!')
      } else {
        deleteArticleList(param).then((res) => {
          this.dataSource = JSON.parse(res.data)
          this.commonjudge(this.dataSource)
          arr.length = 0
        })
      }
    },
    commonjudge (datajudge) {
      for (let i = 0; i < datajudge.length; i++) {
        if (datajudge[i].imgUrl !== undefined) {
          this.$set(datajudge[i], 'imgUrl', '有')
        } else {
          this.$set(datajudge[i], 'imgUrl', '无')
        }
      }
    },
    editById (val) {
      this.$router.push({
        path: '/back/article/new',
        query: {
          articleId: val,
          articleCover: '更新'
        }
      })
    }
  }
}
</script>

<style>
.tablelist{
  font-weight: bold;
  font-size: large
}
.titleOfArticle{
  font-size: x-large
}
.titleInput{
  width: 250px;
  height: 40px;
}
.editable-add-btn {
  margin-bottom: 8px;
}
.userTitle{
  text-align: center;
  font-weight: bold
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>
